<template>
  <div class="reset-password">
    <div class="reset-password__container">
      <div class="reset-password__header">
        <button @click="goBack" class="!rounded-button back-button">
          <i class="fas fa-arrow-left"></i>
        </button>
        <h2 class="reset-password__title">修改密码</h2>
      </div>
      <form @submit.prevent="handleChangePassword" class="reset-password__form">
        <div class="form-group">
          <div class="input-wrapper">
            <input v-model="form.phone" type="tel" :class="{ 'error': errors.phone }" placeholder="手机号">
            <i class="fas fa-phone"></i>
          </div>
          <p v-if="errors.phone" class="error-message">{{ errors.phone }}</p>
        </div>
        <div class="form-group">
          <div class="input-wrapper">
            <input v-model="form.oldPassword" :type="showOldPassword ? 'text' : 'password'"
              :class="{ 'error': errors.oldPassword }" placeholder="旧密码">
            <i class="fas fa-lock"></i>
            <button type="button" @click="showOldPassword = !showOldPassword" class="!rounded-button toggle-password">
              <i :class="showOldPassword ? 'fas fa-eye-slash' : 'fas fa-eye'"></i>
            </button>
          </div>
          <p v-if="errors.oldPassword" class="error-message">{{ errors.oldPassword }}</p>
        </div>
        <div class="form-group">
          <div class="input-wrapper">
            <input v-model="form.newPassword" :type="showNewPassword ? 'text' : 'password'"
              :class="{ 'error': errors.newPassword }" placeholder="新密码" @input="checkPasswordStrength">
            <i class="fas fa-lock"></i>
            <button type="button" @click="showNewPassword = !showNewPassword" class="!rounded-button toggle-password">
              <i :class="showNewPassword ? 'fas fa-eye-slash' : 'fas fa-eye'"></i>
            </button>
            <!-- 新增密码强度显示 -->
            <div v-if="showNewPassword" class="password-strength">
              <div class="strength-bars">
                <div class="strength-bar" :class="{ 'active': passwordStrength >= 1 }"></div>
                <div class="strength-bar" :class="{ 'active': passwordStrength >= 2 }"></div>
                <div class="strength-bar" :class="{ 'active': passwordStrength >= 3 }"></div>
              </div>
              <p class="strength-text">密码强度：{{ passwordStrengthText }}</p>
            </div>
          </div>
          <p v-if="errors.newPassword" class="error-message">{{ errors.newPassword }}</p>
        </div>
        <div class="form-group">
          <div class="input-wrapper">
            <input v-model="form.confirmPassword" :type="showConfirmPassword ? 'text' : 'password'"
              :class="{ 'error': errors.confirmPassword }" placeholder="确认新密码">
            <i class="fas fa-lock"></i>
            <button type="button" @click="showConfirmPassword = !showConfirmPassword"
              class="!rounded-button toggle-password">
              <i :class="showConfirmPassword ? 'fas fa-eye-slash' : 'fas fa-eye'"></i>
            </button>
          </div>
          <p v-if="errors.confirmPassword" class="error-message">{{ errors.confirmPassword }}</p>
        </div>
        <button type="submit" :disabled="!isFormValid" class="!rounded-button submit-button"
          :class="{ 'disabled': !isFormValid }">
          提交修改
        </button>
      </form>
      <div class="link-text">
        <span @click="goBack">返回首页</span>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, computed } from 'vue';
import { useRouter } from 'vue-router';
import axios from 'axios';

const router = useRouter();
const form = ref({
  phone: '',
  oldPassword: '',
  newPassword: '',
  confirmPassword: ''
});
const showOldPassword = ref(false);
const showNewPassword = ref(false);
const showConfirmPassword = ref(false);
const errors = ref({
  phone: '',
  oldPassword: '',
  newPassword: '',
  confirmPassword: ''
});
const passwordStrength = ref(0);
const passwordStrengthText = computed(() => {
  switch (passwordStrength.value) {
    case 0:
      return '无';
    case 1:
      return '弱';
    case 2:
      return '中';
    case 3:
      return '强';
    default:
      return '无';
  }
});

const isFormValid = computed(() => {
  return (
    form.value.phone.length > 0 &&
    form.value.oldPassword.length > 0 &&
    form.value.newPassword.length >= 8 &&
    form.value.newPassword === form.value.confirmPassword &&
    Object.values(errors.value).every(error => !error)
  );
});

const validateForm = () => {
  errors.value = {
    phone: '',
    oldPassword: '',
    newPassword: '',
    confirmPassword: ''
  };
  if (!form.value.phone) {
    errors.value.phone = '请输入手机号';
  }
  if (!form.value.oldPassword) {
    errors.value.oldPassword = '请输入旧密码';
  }
  if (!form.value.newPassword) {
    errors.value.newPassword = '请输入新密码';
  } else if (form.value.newPassword.length < 8) {
    errors.value.newPassword = '密码长度至少为8位';
  }
  if (!form.value.confirmPassword) {
    errors.value.confirmPassword = '请确认新密码';
  } else if (form.value.newPassword !== form.value.confirmPassword) {
    errors.value.confirmPassword = '两次输入的密码不一致';
  }
  return Object.values(errors.value).every(error => !error);
};

const checkPasswordStrength = () => {
  const password = form.value.newPassword;
  let strength = 0;
  if (password.length >= 8) {
    strength++;
    if (/[A-Z]/.test(password) && /[a-z]/.test(password)) {
      strength++;
    }
    if (/[0-9]/.test(password) && /[^A-Za-z0-9]/.test(password)) {
      strength++;
    }
  }
  passwordStrength.value = strength;
};

const handleChangePassword = async () => {
  const error = validateForm();
  if (error) {
    try {
      const response = await axios.post('http://localhost:8080/api/auth/change-password', {
        phone: form.value.phone,
        oldPassword: form.value.oldPassword,
        newPassword: form.value.newPassword
      });

      if (response.data.code === 200) {
        alert('密码修改成功！');
        router.push({ name: 'Login' });
      }
    } catch (error) {
      alert(error.response?.data?.msg || '密码修改失败');
    }
  }
};

const goBack = () => {
  router.go(-1);
};
</script>

<style scoped>
.reset-password {
  min-height: 100vh;
  background-color: #f9fafb;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 1rem;
}

.reset-password__container {
  max-width: 28rem;
  width: 100%;
  background-color: white;
  padding: 2rem;
  border-radius: 0.5rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.reset-password__header {
  display: flex;
  align-items: center;
  margin-bottom: 2rem;
}

.back-button {
  color: #4b5563;
  transition: color 0.2s;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
}

.back-button:hover {
  color: #111827;
}

.back-button i {
  font-size: 1.25rem;
}

.reset-password__title {
  text-align: center;
  font-size: 1.5rem;
  font-weight: 600;
  color: #111827;
  flex: 1;
  margin-left: -2rem;
}

.reset-password__form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.form-group {
  position: relative;
}

.input-wrapper {
  position: relative;
}

.input-wrapper input {
  width: 80%;
  padding: 0.75rem 1rem;
  padding-left: 2.5rem;
  border: 1px solid #d1d5db;
  border-radius: 0.5rem;
  transition: all 0.2s;
}

.input-wrapper input:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

.input-wrapper input.error {
  border-color: #ef4444;
}

.input-wrapper i {
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  color: #9ca3af;
}

.toggle-password {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  color: #9ca3af;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.25rem;
}

.toggle-password:hover {
  color: #4b5563;
}

.error-message {
  margin-top: 0.25rem;
  font-size: 0.875rem;
  color: #ef4444;
}

.submit-button {
  width: 100%;
  padding: 0.75rem;
  background: linear-gradient(to right, #3b82f6, #2563eb);
  color: white;
  font-weight: 500;
  border: none;
  cursor: pointer;
  transform: translateY(0);
  transition: all 0.2s;
}

.submit-button:not(.disabled):hover {
  background: linear-gradient(to right, #2563eb, #1d4ed8);
  transform: translateY(-1px);
}

.submit-button:not(.disabled):active {
  transform: translateY(1px);
}

.submit-button.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.link-text {
  margin-top: 1rem;
  text-align: center;
  cursor: pointer;
  color: #3b82f6;
}

.link-text span:hover {
  text-decoration: underline;
}

/* 新增密码强度样式 */
.password-strength {
  margin-top: 0.5rem;
}

.strength-bars {
  display: flex;
  gap: 0.5rem;
}

.strength-bar {
  height: 4px;
  flex: 1;
  border-radius: 2px;
  background-color: #e5e7eb;
  transition: background-color 0.2s;
}

.strength-bar.active:nth-child(1) {
  background-color: #ef4444;
}

.strength-bar.active:nth-child(2) {
  background-color: #f59e0b;
}

.strength-bar.active:nth-child(3) {
  background-color: #10b981;
}

.strength-text {
  margin-top: 0.25rem;
  font-size: 0.75rem;
  color: #6b7280;
}
</style>